import { useMemo } from 'react';
import { IColumn } from ".";
import { TableCell } from "./TableCell";

/**
 * 生成新的columns，处理extra显示内容渲染
 * @param columns 
 * @returns 
 */
export function useColumns(columns: IColumn[], onCell?: (data: any, index: number) => any) {
    const newColumns = useMemo(() => {
        return columns.map(col => {
            if (col.children) {
                let children = col.children.map(col => {
                    const { extra, extraPlacement = 'bottomRight', extraColor = 'blue', render, extra2, extraPlacement2 = 'topLeft', extraColor2 = 'red', ...rest } = col;
                    if (!!extra) {
                        const newRender = (text: any, data: any, index: number) => {
                            const extraContent = typeof extra === 'function' ? extra(col, data, index) : data[extra];
                            let extraContent2
                            let originContent
                            originContent = typeof render === 'function' ? render(text, data, index) : text;
                            if (!!extra2) {
                                extraContent2 = typeof extra2 === 'function' ? extra2(col, data, index) : data[extra2];
                                return (
                                    <TableCell origin={originContent} extra={extraContent} placement={extraPlacement} extraColor={extraColor} extra2={extraContent2} placement2={extraPlacement2} extraColor2={extraColor2} />
                                );
                            }
                            return (
                                <TableCell origin={originContent} extra={extraContent} placement={extraPlacement} extraColor={extraColor} />
                            );
                        };
                        return Object.assign(rest.editable ? { onCell } : {}, rest, {
                            render: newRender
                        });
                    }
                    return Object.assign(rest.editable ? { onCell } : {}, col);
                });
                col.children = children
            }
            const { extra, extraPlacement = 'bottomRight', extraColor = 'blue', render, extra2, extraPlacement2 = 'topLeft', extraColor2 = 'red', ...rest } = col;
            if (!!extra) {
                const newRender = (text: any, data: any, index: number) => {
                    const extraContent = typeof extra === 'function' ? extra(col, data, index) : data[extra];
                    let extraContent2
                    let originContent
                    originContent = typeof render === 'function' ? render(text, data, index) : text;
                    if (!!extra2) {
                        extraContent2 = typeof extra2 === 'function' ? extra2(col, data, index) : data[extra2];
                        return (
                            <TableCell origin={originContent} extra={extraContent} placement={extraPlacement} extraColor={extraColor} extra2={extraContent2} placement2={extraPlacement2} extraColor2={extraColor2} />
                        );
                    }
                    return (
                        <TableCell origin={originContent} extra={extraContent} placement={extraPlacement} extraColor={extraColor} />
                    );
                };
                return Object.assign(rest.editable ? { onCell } : {}, rest, {
                    render: newRender
                });
            }
            return Object.assign(rest.editable ? { onCell } : {}, col);
        });
    }, [columns, onCell]);
    return newColumns;
}

export enum EDirection {
    UP = 'ArrowUp',
    DOWN = 'ArrowDown',
    LEFT = 'ArrowLeft',
    RIGHT = 'ArrowRight'
}

/** 键盘key转移动方向 */
export const keyboardKey2direction = {
    ArrowUp: EDirection.UP,
    ArrowDown: EDirection.DOWN,
    ArrowLeft: EDirection.LEFT,
    ArrowRight: EDirection.RIGHT
}

/**
 * 移动坐标 
 * @param pos 坐标
 * @param direction 移动方向
 * @param xInterval x索引区间
 * @param yInterval y索引区间
 * @returns 
 */
export function moveXy(pos: number[], direction: EDirection, xInterval: [number, number], yInterval: [number, number]) {
    const [x, y] = pos;
    if (direction === EDirection.UP) {
        if (x === xInterval[0]) return pos;
        return [x - 1, y];
    } else if (direction === EDirection.DOWN) {
        if (x === xInterval[1]) return pos;
        return [x + 1, y];
    } else if (direction === EDirection.LEFT) {
        if (y === yInterval[0]) return pos;
        return [x, y - 1];
    } else if (direction === EDirection.RIGHT) {
        if (y === yInterval[1]) return pos;
        return [x, y + 1];
    } else {
        return pos;
    }
}